<template>
  <div class="container">
    <div class="form">
      <div class="item">
        <div class="label">手机号 </div>
        <input type="number"
               placeholder="请输入手机号"
               disabled
               class="inp"
               maxlength="25"
               v-model="phoneNumber">
      </div>
      <div class="item">
        <div class="label">验证码 </div>
        <input type="number"
               placeholder="请输入验证码"
               class="inp inp_width"
               maxlength="6"
               v-model="identifying_code">
        <div class="getCodeBtn"
             :class="{'isget':isget}"
             @tap.stop="findpwd">{{msg_btn}}</div>
      </div>
      <div class="item">
        <div class="label">新密码</div>
        <input type="password"
               bindblur="checkpwd"
               placeholder="请输入密码(6～16位英文字母+数字)"
               class="inp"
               maxlength="16"
               v-model="new_pwd">
      </div>
      <div class="item">
        <div class="label">确认密码 </div>
        <input type="password"
               bindblur="checkpwd"
               class="inp"
               placeholder="请确认密码"
               maxlength="16"
               v-model="new_pwd_repeat">
      </div>
    </div>
    <div class="sub-btn"
         @tap="save()">
      保存
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
let timer,
  num = 60;
export default {
  data () {
    return {
      identifying_code: "",
      msg_btn: "发送验证码",
      phoneNumber: "",
      isget: false,
      new_pwd: "",
      new_pwd_repeat: ""
    };
  },

  methods: {
    getdata () {
      var that = this;
      wx.getStorage({
        key: "user_data",
        success: function (res) {
          that.phoneNumber = res.data.username;
        }
      });
    },

    findpwd () {
      common.fly_post("api/v4_2/login_sms/send", {
        type: "2",
        phone: this.phoneNumber
      }, result => {
        let res = result.data;
        if (res.status_code == 0) {
          common.mmk_Loading(2, "获取短信成功，请注意查收")
          this.isget = true;
          timer = setInterval(() => {
            this.msg_btn = num + "秒后可重新发送";
            num--;
            if (num <= 0) {
              this.msg_btn = "发送验证码";
              this.isget = false;
              num = 60;
              clearInterval(timer);
            }
          }, 1000);
        } else {
          common.mmk_Loading(2, res.message)
        }
      });
    },
    save () {
      if (this.identifying_code == "") {
        common.mmk_Loading(2, "请输入验证码")
        return false;
      } else if (this.new_pwd == "") {
        common.mmk_Loading(2, "请输入新登陆密码")
        return false;
      } else if (this.new_pwd_repeat == "") {
        common.mmk_Loading(2, "请确认新登录密码")
        return false;
      }
      if (!new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$).{6,10}/).test(this.new_pwd)) {
        common.mmk_Loading(2, "密码必须为字母加数字且长度不小于6位")
        return false;
      } else if (this.new_pwd != this.new_pwd_repeat) {
        common.mmk_Loading(2, "两次密码输入不一致")
        return false;
      } else {
        common.mmk_Loading(0)
        common.fly_post("api/auth/recovery", {
          mobile: this.phoneNumber,
          verify_code: this.identifying_code,
          password: this.new_pwd_repeat
        }, result => {
          common.mmk_Loading(1)
          let res = result.data;
          if (res.status_code == 0) {
            wx.showToast({
              title: "登录密码修改成功", //提示的内容,
              icon: "none", //图标,
              duration: 1000, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透
              success: function () {
                setTimeout(() => {
                  wx.navigateBack({
                    delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                  });
                }, 1500);
              }
            });
            clearInterval(timer);
            this.isget = false;
            this.msg_btn = "发送验证码";
          } else {
            common.mmk_Loading(2, res.message)
          }
        })
      }
    },
    checkpwd (e) {
      var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$).{6,10}/);
      var flag = reg.test(this.new_pwd);
      let that = this;
      if (flag) {
      } else {
        common.mmk_Loading(2, "密码必须为字母加数字且长度不小于8位")
      }
    }
  },
  onLoad () {
    this.getdata();
    wx.setNavigationBarTitle({
      title: "修改登录密码"
    });
    Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    this.getdata();
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  box-sizing: border-box;
  .form {
    width: 100%;
    min-height: 44px;
    .item {
      height: 44px;
      line-height: 44px;
      display: flex;
      padding-left: 15px;
      position: relative;
      background-color: #fff;
      margin-bottom: 1px;
      &:nth-of-type(2) {
        margin-bottom: 10px;
      }
      .label {
        min-width: 60px;
        font-size: 14px;
        font-family: "Medium";
        color: rgba(51, 51, 51, 1);
      }
      .inp {
        display: block;
        height: 100%;
        line-height: 44px;
        font-size: 14px;
        padding-left: 10px;
        flex: 1;
        &.inp_width {
          width: 100px;
        }
      }
      .getCodeBtn {
        height: 30px;
        border-radius: 30px;
        padding: 0 10px;
        border: 1px solid #ff383e;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 56, 62, 1);
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
      }
    }
  }
  .sub-btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgba(255, 56, 62, 1);
    font-size: 17px;
    font-family: "Regular";
    color: rgba(255, 255, 255, 1);
    position: absolute;
    bottom: 0px;
  }
}
</style>


